<template>
  <div class="homePage-content active-list-page">
    <div class="column-container">
      <!-- 面包屑导航 -->
      <div class="breadcrumb flex items-center mb-2 py-1 text-sm text-gray-500">
        <a href="/" class="text-gray-600 hover:text-primary transition-colors flex items-center">首页</a>
        <el-icon class="mx-2 text-xs">
          <ArrowRight />
        </el-icon>
        <a href="/information/informationList"
          class="text-gray-600 hover:text-primary transition-colors flex items-center">出海专栏</a>
        <!-- <el-icon class="mx-2 text-xs">
          <ArrowRight />
        </el-icon>
        <span class="text-gray-900 font-medium">正文</span> -->
      </div>
      <!-- <img width="100%" :src="authorInfo.backgroundUrl" v-if="authorInfo.backgroundUrl"
          class="author-header-background fit-cover"> -->
      <el-image :src="authorInfo?.backgroundUrl"
          class="author-header-background fit-cover">
          <template #error>
            <div class="author-header-background fit-cover" style="background-color: #fff;">
             
            </div>
          </template>
      </el-image>
      <!-- 作者信息 -->
      <div class="author-header-compact">
        <div class="author-logo-compact">
          <div class="media-logo w-20 h-20 flex items-center justify-center border">
            <el-image :src="authorInfo?.avatar" :alt="authorInfo?.nickName"
              class="max-w-full max-h-full rounded-full object-fill">
              <template #error>
                <el-icon size="28">
                  <User />
                </el-icon>
              </template>
            </el-image>
          </div>
        </div>
        <div class="author-info-compact">
          <div class="author-info-main">
            <h1 class="author-name-compact">{{ authorInfo?.nickName }}</h1>
            <p class="author-description-compact">{{ authorInfo?.personalSignature }}</p>
            <div class="author-stats-compact">
              <div class="author-stat">
                <span>文章数：{{ authorInfo?.totalArticles }}</span>
              </div>
              <div class="author-stat">
                <span>阅读量：{{ authorInfo?.totalViews }}</span>
              </div>
            </div>
          </div>
          <div class="author-actions-compact">
            <el-button type="primary" @click="followAuthor">
              <i :class="isFollowed ? 'fas fa-check' : 'fas fa-plus'"></i>
              <span>{{ isFollowed ? '已关注' : '+关注' }}</span>
            </el-button>
            <!-- <button class="contact-btn">
              <i class="fas fa-envelope"></i>
              <span>联系作者</span>
            </button> -->
          </div>
        </div>
      </div>

      <!-- 内容导航 -->
      <div class="content-nav" v-if="columnTags.length > 0">
        <div v-for="(nav, index) in columnTags" :key="index" class="cursor-pointer nav-item"
          :class="{ active: currentNav === nav.id }" @click.prevent="switchNav(nav.id)">
          {{ nav.name }}
        </div>
      </div>

      <!-- 主内容区域 -->
      <div class="main-content">
        <!-- 文章列表 -->
        <div class="article-list">
          <!-- 加载状态 -->
          <div class="loading-spinner" v-if="isLoading">
            <i class="fas fa-spinner"></i>
          </div>

          <!-- 空状态 -->
          <div class="empty-state" v-if="!isLoading && articles.length === 0">
            <i class="fas fa-file-alt"></i>
            <h3>暂无相关文章</h3>
            <p>该作者还没有发布过文章，或者没有符合筛选条件的文章</p>
          </div>

          <!-- 文章列表 -->
          <div v-for="article in articles" :key="article.id" class="article-item" @click="handleArticleClick(article)">
            <div class="article-image">
              <img :src="article.coverImageUrl" :alt="article.title">
            </div>
            <div class="article-content">
              <h2 class="article-title" :title="article.title">
                {{ article.title }}
              </h2>
              <p class="article-summary" :title="article.summary">{{ article.summary }}</p>
              <div class="article-meta">
                <div class="meta-item">
                  <el-icon>
                    <Clock />
                  </el-icon>
                  <DateConvert :date="article.publishTime" />
                </div>
                <div v-for="tag in article.tags" :key="tag" class="meta-item tag">{{ tag }}</div>
                <div class="meta-item">
                  <i class="far fa-eye"></i>
                  <span>阅读 {{ article.viewCount }}</span>
                </div>
              </div>
            </div>
          </div>
          <!-- 分页 -->
          <div class="pagination mt-4 flex justify-between items-center">
            <div class="total">共{{ total }}项数据</div>
            <el-pagination style="justify-content: center" background layout="prev, pager, next" :total="total"
              v-model:current-page="params.pageNum" v-model:page-size="params.pageSize"
              @current-change="getColumnArticleListFun()" />
          </div>
        </div>

        <!-- 侧边栏 -->
        <div class="sidebar">
          <!-- 我的关注 -->
          <div class="bg-white rounded-lg shadow-md p-4 py-2">
            <h3 class="sidebar-title">我的关注</h3>
            <div class="text-center py-8" v-if="!token">
              <button class="text-blue-600 hover:text-blue-700" @click="login">登录后查看</button>
            </div>
            <div class="text-center py-2" v-else>
              <div class="flex">
                <div class="follow-list" v-if="follows.length > 0">
                  <a v-for="follow in follows" :key="follow.id" :href="`/channel/column?id=${follow.columnId}`"
                    target="_blank" class="follow-item">
                    <span>{{ follow.columnName }}</span>
                  </a>
                </div>
                <div v-else style="text-align: left;">暂无关注</div>
              </div>
            </div>
          </div>

          <!-- 搜索框 -->
          <div class="sidebar-section" v-if="false">
            <div class="search-box">
              <input type="text" class="search-input" v-model="searchQuery" placeholder="请输入搜索内容..."
                @keypress.enter="handleSearch">
              <button class="search-button" @click="handleSearch">
                <i class="fas fa-search"></i>
              </button>
            </div>
          </div>

          <!-- 相关话题 -->
          <div class="sidebar-section" v-if="false">
            <h3 class="sidebar-title">热门话题</h3>
            <div class="follow-list">
              <a v-for="topic in topics" :key="topic.id" :href="topic.url" class="follow-item">
                <i class="fas fa-hashtag"></i>
                <span>{{ topic.name }}</span>
              </a>
            </div>
          </div>

          <!-- 近期文章数据 -->
          <div class="sidebar-section" v-if="false">
            <h3 class="sidebar-title">近期文章数据</h3>
            <div style="padding: 10px;">
              <div style="height: 200px; border-radius: 4px; overflow: hidden; margin-bottom: 10px;">
                <img :src="stats.chartImage" alt="阅读量趋势图" style="width: 100%; height: 100%; object-fit: cover;">
              </div>
              <div style="display: flex; justify-content: space-between; font-size: 13px; color: var(--text-light);">
                <div v-for="(stat, key) in stats.items" :key="key">
                  <div style="font-weight: 600; color: var(--primary-color);">{{ stat.value }}</div>
                  <div>{{ stat.label }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 返回顶部按钮 -->
      <div class="back-to-top" :class="{ visible: showBackToTop }" @click="scrollToTop">
        <i class="fas fa-arrow-up"></i>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { Clock, ArrowRight, User } from '@element-plus/icons-vue'
import { useRoute } from 'vue-router'
import { performUserAction } from "@/api/userAction";
import { useUserStore } from '~/stores/user'
import { getColumnTags, getColumnArticleList, getColumnOrgUserDetail, checkFollowColumnOrgUser, getFollowingColumns } from '@/api/channel'
const route = useRoute()
// 通过paina  获取token
const userStore = useUserStore()
const token = ref('');


// 关注列表
const follows = ref([])

watch(
  () => userStore.token,
  (nv, ov) => {
    token.value = nv;
   if(nv){
    getFollowingColumnsFun();
   }
  },
  { deep: true, immediate: false }
);

// 获取用户关注出海专栏列表
const getFollowingColumnsFun = async () => {
  if (token.value) {
    const res = await getFollowingColumns()
    if (res.suc) {
      follows.value = res.data
    }
  }
}

const login = () => {
  userStore.setShowLoginDialog(true)
}


// 作者信息
const authorInfo = ref({})

// 获取作者信息
const getColumnOrgUserDetailFun = async () => {
  const res = await getColumnOrgUserDetail(route.query.id)
  if (res.suc) {
    authorInfo.value = res.data
  }
}

// 关注状态
const isFollowed = ref(false)

// 检查是否关注
const checkFollowColumnOrgUserFun = async () => {
  const res = await checkFollowColumnOrgUser(route.query.id)
  if (res.suc) {
    isFollowed.value = res.data
  }
}

// 关注作者
const followAuthor = () => {
  performUserAction({
    targetId: authorInfo.value.userId,
    businessType: 'org_user',
    actionType: 'follow'
  }).then(res => {
    checkFollowColumnOrgUserFun();
    getFollowingColumnsFun();
  })
}


const currentNav = ref(0)
const switchNav = (id) => {
  currentNav.value = id
  // 这里可以添加切换内容的逻辑
  params.value.tagId = id;
  getColumnArticleListFun();
}

const params = ref({
  "columnId": route.query.id,
  "tagId": null,
  "pageNum": 1,
  "pageSize": 10
});

const total = ref(0);


// 文章列表
const articles = ref([])

// 获取文章列表
const getColumnArticleListFun = async () => {
  const res = await getColumnArticleList(params.value)
  if (res.suc) {
    articles.value = res.data.list;
    total.value = res.data.total;
  }
}

const isLoading = ref(false)

// 搜索
const searchQuery = ref('')
const handleSearch = () => {
  if (searchQuery.value.trim()) {
    // 这里可以添加搜索逻辑
    console.log('搜索:', searchQuery.value)
    searchQuery.value = ''
  }
}

// 热门话题
const topics = ref([
  { id: 1, name: '日韩出海趋势', url: '#' },
  { id: 2, name: '跨境电商平台', url: '#' },
  { id: 3, name: 'Temu出海挑战', url: '#' },
  { id: 4, name: '东亚物流新政', url: '#' },
  { id: 5, name: '日本消费习惯分析', url: '#' }
])

// 统计数据
const stats = ref({
  chartImage: 'https://img.freepik.com/free-vector/business-infographic-with-growth-charts-statistics_23-2148539718.jpg',
  items: {
    views: { value: '15.6k', label: '本月阅读' },
    articles: { value: '24', label: '本月发文' },
    growth: { value: '+12.2%', label: '环比增长' }
  }
})

// 返回顶部
const showBackToTop = ref(false)
const scrollToTop = () => {
  window.scrollTo({ top: 0, behavior: 'smooth' })
}

const handleScroll = () => {
  showBackToTop.value = window.scrollY > 300
}



const columnTags = ref([]);
const getColumnTagsFun = async () => {
  const res = await getColumnTags(route.query.id)
  if (res.suc) {
    columnTags.value = res.data
  }
}

const handleArticleClick = (item) => {
  console.log(item)
  // 新开专栏详情页
  window.open(`/channel/columnInformationDetails?id=${item.articleId}&columnId=${route.query.id}`, '_blank')
}

onMounted(() => {
  token.value = userStore.token || localStorage.getItem('token');
  window.addEventListener('scroll', handleScroll);
  getColumnTagsFun();
  getColumnArticleListFun();
  getColumnOrgUserDetailFun();
  checkFollowColumnOrgUserFun();
  getFollowingColumnsFun();
})

onUnmounted(() => {
  window.removeEventListener('scroll', handleScroll)
})
</script>

<style scoped>
/* 基础设置 */

.column-container {
  --primary-color: #0055ff;
  --primary-light: #e6efff;
  --primary-dark: #0044cc;
  --secondary-color: #ff5500;
  --text-color: #333333;
  --text-light: #666666;
  --text-lighter: #999999;
  --background-color: #f5f7fa;
  --white: #ffffff;
  --border-color: #e5e5e5;
  --success-color: #28a745;
  --warning-color: #ffc107;
  --border-radius: 6px;
  --box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  --transition: all 0.3s ease;
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing: 16px;
  --spacing-md: 24px;
  --spacing-lg: 32px;
  --spacing-xl: 48px;
  min-height: 100vh;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--spacing);
}

/* 作者信息头部 */
.author-header-compact {
  display: flex;
  align-items: center;
  padding: 15px;
  background-color: var(--white);
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
  margin-bottom: 10px;
}

.author-header-background{
  width: 100%;
  height: 100px;
  border-radius: var(--border-radius);
  overflow: hidden;
  aspect-ratio: 5/1;
  margin-bottom: 10px;
}

.author-logo-compact {
  width: 80px;
  height: 80px;
  border-radius: var(--border-radius);
  overflow: hidden;
  margin-right: 15px;
  flex-shrink: 0;
}

.author-logo-compact img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.author-info-compact {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
}

.author-info-main {
  flex: 1;
  min-width: 200px;
}

.author-name-compact {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 5px;
}

.author-description-compact {
  color: var(--text-light);
  font-size: 14px;
  margin-bottom: 5px;
  margin-right: 10px;
}

.author-stats-compact {
  display: flex;
  gap: 15px;
  font-size: 14px;
  color: var(--text-light);
}

.author-actions-compact {
  display: flex;
  gap: 10px;
  margin-left: auto;
  align-self: center;
}

/* 内容导航 */
.content-nav {
  background-color: #3367d6;
  padding: 8px 15px;
  margin-bottom: var(--spacing-sm);
  border-radius: 0;
  color: white;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 20px;
  border-radius: 4px;
}

.content-nav .nav-item {
  color: white;
  opacity: 0.6;
  transition: var(--transition);
  text-decoration: none;
  padding: 4px 8px;
}

.content-nav nav-item:hover {
  opacity: 1;
}

.content-nav .active {
  opacity: 1;
  font-weight: 500;
  position: relative;
}

/* 主内容区域 */
.main-content {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: var(--spacing);
  margin-bottom: var(--spacing-lg);
}

/* 文章列表 */
.article-list {
  background-color: var(--white);
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
  padding: var(--spacing);
}

.article-item {
  display: flex;
  padding: var(--spacing) 0;
  border-bottom: 1px solid var(--border-color);
}

.article-item:last-child {
  border-bottom: none;
}

.article-image {
  width: 180px;
  height: 120px;
  border-radius: var(--border-radius);
  overflow: hidden;
  margin-right: var(--spacing);
  flex-shrink: 0;
}

.article-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.article-item:hover .article-image img {
  transform: scale(1.05);
}

.article-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.article-title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: var(--spacing-xs);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}

.article-summary {
  color: var(--text-light);
  font-size: 14px;
  margin-bottom: var(--spacing-sm);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

.article-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  font-size: 12px;
  color: var(--text-lighter);
  margin-top: auto;
}

.meta-item {
  display: flex;
  align-items: center;
  gap: 4px;
}

.tag {
  background-color: var(--primary-light);
  color: var(--primary-color);
  padding: 2px 8px;
  border-radius: 2px;
  font-size: 12px;
}

.pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 16px;
  padding: 16px 0;
}

/* 侧边栏 */
.sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.sidebar-section {
  background-color: var(--white);
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
  padding: var(--spacing);
}

.sidebar-title {
  font-size: 16px;
  font-weight: 600;
  padding-bottom: var(--spacing-xs);
  border-bottom: 1px solid var(--border-color);
}

/* 我的关注 */
.follow-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
}

.follow-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  background-color: var(--background-color);
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 13px;
  transition: var(--transition);
}

.follow-item:hover {
  background-color: var(--primary-light);
}

.follow-item-avatar {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  overflow: hidden;
}

.follow-item-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 搜索框 */
.search-box {
  display: flex;
  margin-bottom: var(--spacing);
}

.search-input {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid var(--border-color);
  border-radius: 4px 0 0 4px;
  font-size: 14px;
  outline: none;
  transition: border-color 0.3s;
}

.search-input:focus {
  border-color: var(--primary-color);
}

.search-button {
  background-color: var(--primary-color);
  color: white;
  border: none;
  border-radius: 0 4px 4px 0;
  padding: 0 16px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.search-button:hover {
  background-color: var(--primary-dark);
}

/* 页面背景图 */
.page-background {
  height: 140px;
  background-image: url('https://img.freepik.com/free-photo/aerial-view-container-cargo-ship-sea_335224-735.jpg');
  background-size: cover;
  background-position: center;
  margin-bottom: var(--spacing-sm);
  border-radius: var(--border-radius);
  position: relative;
}

.page-background::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 80px;
  background: linear-gradient(to top, rgba(255, 255, 255, 0.9), transparent);
}

/* 返回顶部按钮 */
.back-to-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: var(--primary-color);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  transition: var(--transition);
  opacity: 0;
  visibility: hidden;
  z-index: 100;
}

.back-to-top.visible {
  opacity: 1;
  visibility: visible;
}

.back-to-top:hover {
  background-color: var(--primary-dark);
  transform: translateY(-3px);
}

/* 响应式样式 */
@media (max-width: 992px) {
  .main-content {
    grid-template-columns: 1fr;
  }

  .sidebar {
    order: -1;
  }
}

@media (max-width: 768px) {
  .article-item {
    flex-direction: column;
  }

  .article-image {
    width: 100%;
    height: 200px;
    margin: 0 0 var(--spacing) 0;
  }

  .author-header-compact {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .author-logo-compact {
    margin: 0 0 var(--spacing) 0;
  }
}

@media (max-width: 576px) {
  .content-nav {
    flex-wrap: wrap;
  }
}
</style>
